<template>
  <div class="lookupTestStatistic">
    <full-parent-dom-with-dask :loading="loadingInfoData"></full-parent-dom-with-dask>
    <div class="lookupTestStatisticTitleBox">
      <h4 class="withVerticleLineT4 title14">{{ $t('testTaskTj') }}</h4>
    </div>
    <div class="updateStatisticItems">
      <a-row class="updateStatisticItem" :gutter="20">
        <a-col :md="10" :sm="24">{{ $t('allVehicles') }}({{ $t('tai') }})</a-col>
        <a-col :md="14" :sm="24" class="result">
          <table-ellipsis :tableEllipsisIsTurnLine="false" :text="infoData.totalVehicle"></table-ellipsis>
        </a-col>
      </a-row>
      <a-row class="updateStatisticItem" :gutter="20">
        <a-col :md="10" :sm="24">{{ $t('successfulVehicle') }}({{ $t('tai') }})</a-col>
        <a-col :md="14" :sm="24" class="result">
          <table-ellipsis :tableEllipsisIsTurnLine="false" :text="infoData.successVehicle"></table-ellipsis>
        </a-col>
      </a-row>
      <a-row class="updateStatisticItem" :gutter="20">
        <a-col :md="10" :sm="24">{{ $t('failedVehicle') }}({{ $t('tai') }})</a-col>
        <a-col :md="14" :sm="24" class="result">
          <table-ellipsis :tableEllipsisIsTurnLine="false" :text="infoData.failVehicle"></table-ellipsis>
        </a-col>
      </a-row>
      <a-row class="updateStatisticItem" :gutter="20">
        <a-col :md="10" :sm="24">{{ $t('vehicleInProgress') }}({{ $t('tai') }})</a-col>
        <a-col :md="14" :sm="24" class="result">
          <table-ellipsis :tableEllipsisIsTurnLine="false" :text="infoData.runningVehicle"></table-ellipsis>
        </a-col>
      </a-row>
      <a-row class="updateStatisticItem" :gutter="20">
        <a-col :md="10" :sm="24">{{ $t('vehicleNotStarted') }}({{ $t('tai') }})</a-col>
        <a-col :md="14" :sm="24" class="result">
          <table-ellipsis :tableEllipsisIsTurnLine="false" :text="infoData.notStartVehicle"></table-ellipsis>
        </a-col>
      </a-row>
      <!-- <a-row class="updateStatisticItem" :gutter="20">
        <a-col :md="10" :sm="24">{{ $t('suspendedVehicle') }}({{ $t('tai') }})</a-col>
        <a-col :md="14" :sm="24" class="result">
          <table-ellipsis :tableEllipsisIsTurnLine="false" :text="infoData.pausedVehicle"></table-ellipsis>
        </a-col>
      </a-row> -->
      <a-row class="updateStatisticItem" :gutter="20">
        <a-col :md="10" :sm="24">{{ $t('unfinishedVehicle') }}({{ $t('tai') }})</a-col>
        <a-col :md="14" :sm="24" class="result">
          <table-ellipsis :tableEllipsisIsTurnLine="false" :text="infoData.notCompleteVehicle"></table-ellipsis>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
import taskApi from '@/api/modules/task'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { mapGetters } from 'vuex'
const initInfoData = {
  totalVehicle: '-',
  successVehicle: '-',
  notStartVehicle: '-',
  notCompleteVehicle: '-',
  failVehicle: '-',
  runningVehicle: '-',
  pausedVehicle: '-'
}
export default {
  components: {
    FullParentDomWithDask,
    tableEllipsis
  },
  props: {
    taskId: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapGetters(['drawerOpenTime'])
  },
  data () {
    return {
      loadingInfoData: false,
      infoData: { ...initInfoData }
    }
  },
  watch: {
    taskId: {
      handler () {
        this.getData()
      },
      immediate: true
    },
    drawerOpenTime: {
      handler () {
        this.getData()
      }
    }
  },
  methods: {
    // 获取当前测试任务统计信息
    getData () {
      this.infoData = { ...initInfoData }
      if (!this.taskId || this.loadingInfoData) {
        return
      }
      this.loadingInfoData = true
      taskApi.getUpgradeStatisticsReport({ taskIds: [this.taskId] }).then(res => {
        if (!res.data) {
          return
        }
        const data = this.setUndefinedVal(res.data)
        this.infoData = {
          totalVehicle: data.totalVehicle,
          successVehicle: data.successVehicle,
          notStartVehicle: data.notStartVehicle,
          notCompleteVehicle: data.notCompleteVehicle,
          failVehicle: data.failVehicle,
          runningVehicle: data.runningVehicle,
          pausedVehicle: data.pausedVehicle
        }
      }).finally(() => {
        this.loadingInfoData = false
      })
    },
    setUndefinedVal (data) {
      Object.keys(initInfoData).forEach(key => {
        if (typeof data[key] === 'undefined') {
          // eslint-disable-next-line no-param-reassign
          data[key] = '-'
        }
      })
      return data
    }
  }
}
</script>
<style lang="less" scoped>
.lookupTestStatistic {
  position: relative;
}
.lookupTestStatisticTitleBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.updateStatisticItem {
    margin-top: 20px;
    .result {
        text-align: right;
        color:@blockHoverTextColor;
    }
}
</style>
